<template>
    <div >
        <div id="postcomment">
            <h3>提交评论</h3>
            <p class="p"></p>
            <textarea placeholder="请输出评论内容" v-model="postcontent"></textarea>
            <mt-button @click="postcomment" type="primary" size="large">提交</mt-button>
        </div>
        <div id="list">
            <h3>评论列表</h3>
            <p class="p"></p>
            <div v-for="(item,index) in list">
                <div class="title">
                    <span>第{{index+1}}楼：</span>
                    <span>用户：{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">{{item.content}}</li>
                </ul>

            </div>
            <mt-button plain @click="getmore" type="danger" size="large">获取更多</mt-button>

        </div>
    </div>
</template>
<script>
    import common from '../../kits/common.js';
    import {Toast} from 'mint-ui';

    export default {
        props: ['id'],
        data() {
            return {
                postcontent: '',
                pageindex:1,
                list: [
                    {
                        "user_name": "匿名用户1",
                        "add_time": "2017-04-10T08:28:08.000Z",
                        "content": "aaaaaaa"
                    }, {
                        "user_name": "匿名用户2",
                        "add_time": "2017-04-10T08:28:08.000Z",
                        "content": "bbbbbbbbb"
                    }, {
                        "user_name": "匿名用户3",
                        "add_time": "2017-04-10T08:28:08.000Z",
                        "content": "cccccccca"
                    },

                ]
            }
        },
        created() {
//            this.getcommentlist(this.pageindex);
        },
        methods: {
            getmore(){
                this.pageindex++;
                this.getcommentlist(this.pageindex);
            },
            getcommentlist(pageindex){
                pageindex = pageindex || 1;
                var url = common.apidomain+'/api/...'+this.id+'?pageindex='+pageindex;
                this.$http.get(url).then(res=>{
                    var data = res.body;
                    if(data.status!=0){
                        Toast(data.message);
                        return ;
                    }
                    this.list = this.list.concat(data.message);
                });
            },
            postcomment() {
                if (this.postcontent.trim().length <= 0) {
                    Toast('内容不能为空');
                    return;
                }
                var url = common.apidomain + '/api/..' + this.id;
                this.$http.post(url, {content: this.postcontent}, {emulateJSON: true})
                    .then(res => {
                        var data = res.body;
                        Toast(data.message);
                    });
                //追加到前面，减少请求
//                this.getcommentlist(this.pageindex);
                this.list = [{
                    "user_name":"匿名用户",
                    "add_time":new Date(),
                    "content":this.postcontent
                }].concat(this.list);
                this.postcontent = '';
            }
        }
    }
</script>
<style scoped>
    #postcomment {
        padding: 5px;
    }

    .p {
        height: 1px;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }

    #list {
        padding: 5px;
    }

    .title {
        padding: 5px;
        color: #6d6d72;
        font-size: 15px;
        background-color: rgba(0, 0, 0, 0.1);
    }

</style>